import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Input } from "@/components/ui/input";
import { Calendar, Clock, Building, Tag, Search, ArrowUpDown } from "lucide-react";

// 模拟供需数据
const marketItems = [
  {
    id: 1,
    title: "高性能服务器采购",
    type: "需求",
    company: "华夏科技有限公司",
    category: "IT设备",
    quantity: "50台",
    deadline: "2025-07-15",
    price: "面议",
    description: "采购50台高性能服务器，用于大数据处理和AI训练，要求高性能、高可靠性、低能耗。",
    requirements: ["64核心以上CPU", "256GB以上内存", "10TB以上存储", "支持GPU加速"],
    contact: {
      name: "张经理",
      phone: "13812345678",
      email: "procurement@huaxiatech.com",
    },
    publishDate: "2025-05-10",
  },
  {
    id: 2,
    title: "工业级传感器供应",
    type: "供应",
    company: "东方制造集团",
    category: "工业设备",
    quantity: "1000+",
    deadline: "长期有效",
    price: "¥500-2000/个",
    description: "提供各类工业级传感器，包括温度、压力、流量、位移等，适用于各类工业自动化场景。",
    features: ["高精度", "高可靠性", "防尘防水", "长寿命"],
    contact: {
      name: "李工程师",
      phone: "13987654321",
      email: "sales@dongfangmfg.com",
    },
    publishDate: "2025-05-12",
  },
  {
    id: 3,
    title: "太阳能组件代工",
    type: "供应",
    company: "绿源环保科技",
    category: "新能源设备",
    quantity: "年产能100MW",
    deadline: "长期有效",
    price: "¥0.8-1.2/W",
    description: "提供太阳能组件代工服务，拥有全自动生产线和严格的质量控制体系，产品通过多项国际认证。",
    features: ["高转换效率", "严格质检", "快速交付", "定制化服务"],
    contact: {
      name: "王总监",
      phone: "13567891234",
      email: "cooperation@greensource.com",
    },
    publishDate: "2025-05-15",
  },
  {
    id: 4,
    title: "企业融资需求",
    type: "需求",
    company: "智慧教育集团",
    category: "金融服务",
    quantity: "5000万",
    deadline: "2025-08-30",
    price: "面议",
    description: "寻求5000万元融资，用于在线教育平台升级和市场拓展，公司有稳定现金流和良好成长性。",
    requirements: ["合理估值", "灵活融资方式", "战略资源对接", "长期合作"],
    contact: {
      name: "赵总",
      phone: "13612345678",
      email: "investment@smartedu.com",
    },
    publishDate: "2025-05-18",
  },
  {
    id: 5,
    title: "医疗器械代理",
    type: "供应",
    company: "康健医疗科技",
    category: "医疗设备",
    quantity: "不限",
    deadline: "长期有效",
    price: "区域代理",
    description: "诚招医疗器械区域代理商，产品包括便携式检测设备、家用医疗设备等，有完善的培训和售后支持。",
    features: ["高利润率", "专业培训", "市场支持", "售后保障"],
    contact: {
      name: "陈经理",
      phone: "13712345678",
      email: "agency@healthtech.com",
    },
    publishDate: "2025-05-20",
  },
  {
    id: 6,
    title: "智能制造解决方案",
    type: "需求",
    company: "某大型制造企业",
    category: "智能制造",
    quantity: "整厂方案",
    deadline: "2025-09-30",
    price: "1000-3000万",
    description: "寻找智能制造解决方案提供商，对现有工厂进行智能化改造，提高生产效率和产品质量。",
    requirements: ["生产线自动化", "数据采集分析", "质量控制", "设备预测性维护"],
    contact: {
      name: "刘厂长",
      phone: "13612345678",
      email: "factory@example.com",
    },
    publishDate: "2025-05-22",
  },
];

export default function MarketplacePage() {
  return (
    <div className="container py-10">
      <div className="space-y-4 text-center mb-10">
        <h1 className="text-3xl font-bold">供需平台</h1>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          发布和查看供需信息，促进会员企业间的业务合作
        </p>
        <div className="flex justify-center gap-4 pt-4">
          <Button>发布供应</Button>
          <Button variant="outline">发布需求</Button>
        </div>
      </div>

      {/* 搜索和筛选 */}
      <div className="flex flex-col md:flex-row gap-4 mb-8">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
          <Input placeholder="搜索供需信息..." className="pl-10" />
        </div>
        <Button variant="outline" className="gap-2">
          <ArrowUpDown className="h-4 w-4" /> 排序
        </Button>
      </div>

      {/* 供需分类和列表 */}
      <Tabs defaultValue="全部" className="mb-10">
        <TabsList className="flex flex-wrap justify-center mb-8">
          <TabsTrigger value="全部">全部</TabsTrigger>
          <TabsTrigger value="供应">供应</TabsTrigger>
          <TabsTrigger value="需求">需求</TabsTrigger>
        </TabsList>
        <TabsContent value="全部">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {marketItems.map((item) => (
              <MarketplaceCard key={item.id} item={item} />
            ))}
          </div>
        </TabsContent>
        <TabsContent value="供应">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {marketItems
              .filter((item) => item.type === "供应")
              .map((item) => (
                <MarketplaceCard key={item.id} item={item} />
              ))}
          </div>
        </TabsContent>
        <TabsContent value="需求">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {marketItems
              .filter((item) => item.type === "需求")
              .map((item) => (
                <MarketplaceCard key={item.id} item={item} />
              ))}
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}

// 供需信息卡片组件
function MarketplaceCard({ item }: { item: any }) {
  return (
    <Card className="flex flex-col">
      <CardHeader>
        <div className="flex justify-between items-start">
          <CardTitle className="text-lg">{item.title}</CardTitle>
          <Badge variant={item.type === "供应" ? "default" : "secondary"}>
            {item.type}
          </Badge>
        </div>
        <CardDescription className="flex items-center gap-1">
          <Building className="h-4 w-4" /> {item.company}
        </CardDescription>
      </CardHeader>
      <CardContent className="flex-1">
        <p className="text-sm text-muted-foreground mb-4">{item.description}</p>
        <div className="grid grid-cols-2 gap-y-2 text-sm mb-4">
          <div className="flex items-center gap-2">
            <Tag className="h-4 w-4 text-muted-foreground" />
            <span>类别: {item.category}</span>
          </div>
          <div className="flex items-center gap-2">
            <span>数量: {item.quantity}</span>
          </div>
          <div className="flex items-center gap-2">
            <Calendar className="h-4 w-4 text-muted-foreground" />
            <span>截止: {item.deadline}</span>
          </div>
          <div className="flex items-center gap-2">
            <Clock className="h-4 w-4 text-muted-foreground" />
            <span>发布: {item.publishDate}</span>
          </div>
        </div>
        <div className="space-y-2">
          <p className="text-sm font-medium">
            {item.type === "供应" ? "产品特点:" : "需求条件:"}
          </p>
          <div className="flex flex-wrap gap-2">
            {(item.features || item.requirements)?.map((feature: string, index: number) => (
              <Badge key={index} variant="outline">{feature}</Badge>
            ))}
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex justify-between items-center">
        <p className="font-semibold">价格: {item.price}</p>
        <Button>联系对接</Button>
      </CardFooter>
    </Card>
  );
}